/*
 * @Descripttion : dropdown 组件
 * @Author       : QianFox Team
 * @Date         : 2022-02-18 09:31:01
 * @LastEditors  : QianFox Team
 * @LastEditTime : 2022-06-01 09:02:19
 */

import { Popper } from './popper';

function Dropdown() {
    Popper.call(this);
    this.HANDLE = '.foxui-dropdown-handle';
    this.MENU = '.foxui-dropdown-menu';
    this.ITEM = '.foxui-dropdown-item';
    // 当前组件使用
    this.CONTAINER = '.foxui-dropdown';
    this.timer = null;
}

Object.setPrototypeOf(Dropdown.prototype, Popper.prototype);

Dropdown.prototype._init = function () {
    this._bindToggle();
    this._bindConfirm();
    this._bindHover();
};

Dropdown.prototype._bindHover = function () {
    let that = this;

    $(document).on('mouseover', that.CONTAINER, function () {
        let $handle = $(this).children(this.HANDLE);
        let trigger = $handle.attr('data-trigger');

        if (trigger === 'hover') {
            let $menu = $handle.siblings(that.MENU);

            clearTimeout(this.timer);
            this.timer = null;

            this.timer = setTimeout(() => {
                // 设置弹出面板的位置(需放在显示之前，否则会出现跳动)
                that._setPosition($(this).find(that.HANDLE)[0]);
                // 显示
                $handle.addClass('is-active');
                $menu.slideDown('fast');
            }, 250);
        }
    });

    $(document).on('mouseout', that.CONTAINER, function () {
        let $handle = $(this).children(this.HANDLE);
        let trigger = $handle.attr('data-trigger');

        if (trigger === 'hover') {
            let $menu = $handle.siblings(that.MENU);

            clearTimeout(this.timer);
            this.timer = null;

            this.timer = setTimeout(() => {
                $handle.removeClass('is-active');
                $menu.slideUp('fast');
            }, 250);
        }
    });
};

let dropdown = new Dropdown();

export { dropdown };
